<template>
  <div style="min-height: 350px;">
    <!-- 当前头像 -->
    <div>
      <h4>当前我的头像</h4>
      <p style="margin: 10px 0">
        如果您还没有设置自己的头像，系统会显示为默认头像，您需要自己上传一张新照片来作为自己的个人头像。
      </p>
      <el-avatar shape="square" :size="180" :src="user.avatar"></el-avatar>
    </div>
    <h4 style="margin: 10px 0">设置我的新头像</h4>
    <p style="margin: 10px 0">
      请选择一张新照片进行上传。
      选择头像后，您可能需要点击修改按钮，才能查看最新的头像效果。
    </p>
    <div v-show="!hideShow" style="width: 178px; height: 178px;display: block;"
         class="el-upload-list el-upload-list--picture-card" >
      <div class="el-upload-list__item" style="width: 178px; height: 178px">
        <img  class="avatar" :src="imageUrl">
        <label class="el-upload-list__item-status-label">
          <i class="el-icon-upload-success el-icon-check"/>
        </label>
        <span class="el-upload-list__item-actions">
                  <span @click="handlePreview()">
                    <i class="el-icon-zoom-in"/>
                  </span>
                  <span class="el-upload-list__item-delete">
                    <i class="el-icon-delete" @click.stop="handleRemove()"/>
                  </span>
                </span>
      </div>
    </div>
    <el-upload
        v-show="hideShow"
        class="avatar-uploader"
        action="http://localhost:19090/user/upload-picture"
        name="picFile"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <el-button type="primary" @click="save()">修改</el-button>
  </div>
</template>

<script>
export default {
  created() {
    this.getCurrentUserInfo();
  },

  data() {
    return {
      user: "",
      imageUrl: '',
      uploadAvatar: '',
      hideShow: true,
      dialogImageUrl: '',
      dialogVisible: false,
      userAvatar:{
        id:'',
        avatar:'',
      },

    };
  },
  methods: {
    getCurrentUserInfo() {
      this.axios.get("/user/personal").then(({ data }) => {
        if(data.state == 20000){
          this.user = data.data
        }else {
          this.$message.error(data.message);
        }

      })
    },
    handleRemove() {

      this.axios.get("/user/remove-picture?pictureName=" + this.imageUrl).then(({data}) => {
        if (data.state == 20000) {
          this.$message.success(data.message);
        } else {
          this.$message.error(data.message);
        }
      });
      this.hideShow = !this.hideShow;
      this.imageUrl = '';

    },
    handlePreview() {
      this.dialogImageUrl = this.imageUrl;
      this.dialogVisible = true;
    },
    handleAvatarSuccess(res, file) {
      console.log("res:" + res.data)
      this.imageUrl = res.data;
      this.userAvatar.avatar = this.imageUrl;
      this.hideShow = false;

    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === "image/png";

      const isLt5M = file.size / 1024 / 1024 < 5;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
      }

      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isJPG && isLt5M;
    },

    save(){
      if (this.imageUrl == '') {
        this.$message.error("请添加图片!");
      } else {
        this.userAvatar.id = this.user.id;
        this.axios.post("/user/update-avatar", this.userAvatar).then(({data}) => {
          if (data.state == 20000) {
            this.user.avatar = data.data.avatar;
            this.hideShow = !this.hideShow;
            this.imageUrl = '';
            this.$message.success(data.message);
            location.reload();//上传成功后自动刷新页面，刚上传的头像显示出来
          } else {
            this.$message.error(data.message);
          }
        });
      }
    }



  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

* {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB W3", "Hiragino Sans GB",
  "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>
